<template>
	<div v-if="user" v-my-directive data-title="用户中心" class="usermain">
		<!-- 左边 -->
		<userleft></userleft>
		<div class="CatalogLayout">
			<!-- 引入文件的方式 -->
			<div class="Genericpadding bold">我的訂單</div>

			<div class="Genericpadding helf CatalogLayout">
				<el-scrollbar :always="true">
					<div class="CatalogLayout minaxgap" v-loading="loading">
						<el-radio-group class="center" v-model="tabPosition" style="margin-bottom: 20px">
							<el-radio-button label="" @click=";(tabPosition = ''), (curPage = 1), actr()">{{ $t('message.ALL') }}</el-radio-button>
							<el-radio-button label="1" @click=";(tabPosition = '1'), (curPage = 1), actr()">已支付</el-radio-button>
							<el-radio-button label="0" @click=";(tabPosition = '0'), (curPage = 1), actr()">未支付</el-radio-button>
							<el-radio-button label="2" @click=";(tabPosition = '2'), (curPage = 1), actr()">已关闭</el-radio-button>
						</el-radio-group>
						<div style="width: 820px">
							<el-table :data="aclist" border>
								<el-table-column prop="OrderNo" label="订单号" width="185" />
								<el-table-column prop="name" label="名称" width="180" show-overflow-tooltip />
								<el-table-column prop="Orderdetails.Price" min-width="70" label="金额" show-overflow-tooltip />
								<el-table-column min-width="70" label="实付" show-overflow-tooltip>
									<template #default="scope">
										<div> {{ scope.row.Status == 1 ? (scope.row.Orderdetails.value ? '$' + scope.row.Orderdetails.value : '未知') : '未支付' }}</div>
									</template>
								</el-table-column>
								<el-table-column prop="updatetime" label="时间" width="170" show-overflow-tooltip />
								<!-- 里面包含支付 或者关闭 -->
								<!-- 已经支付的话 要不要给个查看 -->
								<!-- 已经支付是查看 -->
								<el-table-column width="70" label="操作">
									<template #default="scope">
										<div style="text-align: center">
											<el-button v-if="scope.row.Status == 0" size="small" type="danger" @click=";(Order = scope.row), (Purchasecourses = true), key++">支付</el-button>
											<router-link :to="scope.row.path"><el-button v-if="scope.row.Status != 0" link size="small" type="info">查看</el-button></router-link>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="dispaygrid">
							<el-pagination background class="centerend" :hide-on-single-page="value" :current-page="curPage" @current-change="page" :page-size="pagesize" layout="prev, pager, next" :total="total"> </el-pagination>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</div>
		<!-- 订单号 -->
		<settlement v-if="Purchasecourses" :info="Order" @custom-event="actr" :key="key"></settlement>
	</div>
</template>

<script>
	import settlement from '@/components/settlement'
	import userleft from './../components/userleft'
	import { dataRequest as api } from '@/api/api'
	import { mapState } from 'vuex'
	export default {
		name: 'name',
		props: ['userid'],
		computed: {
			...mapState(['user']),
		},
		components: {
			// 组件
			userleft,
			settlement,
		},
		data() {
			return {
				//返回值
				tabPosition: '',
				Order: {},
				Purchasecourses: false,
				key: 0,
				loading: true,
				value: true,
				curPage: 1,
				pagesize: 10, //每页显示数量
				total: 0,

				//返回值
				offset: 'ASC',
				tosort: 'time',
				aclist: [],
			}
		},
		methods: {
			// 函数
			// 函数
			async actr() {
				this.loading = true
				let condition = { user: this.user.id }
				if (this.tabPosition) {
					condition.Status = this.tabPosition
				}
				let array = await api(['getOrderpage', { condition: condition, perPage: this.pagesize, page: this.curPage, offset: this.offset, tosort: this.tosort }])
				console.log('结果', array)

				if (array.code == 200) {
					this.aclist = array.data
					this.total = array.massage / 1
				} else {
					this.aclist = []
					this.total = 0
				}
				this.loading = false
			},
			// fenye
			page(ele) {
				this.loading = true
				this.curPage = ele
				this.actr()
			},
		},
		mounted() {
			// 生命周期:

			this.actr()
		},
		updated() {
			window.scrollTo({ behavior: 'instant', top: 0 })
		},
	}
</script>
<style scoped>
	.centerend {
		place-self: center end;
	}
	.pimgmins .image-slot {
		font-size: 8px;
	}
</style>
